<template>
  <scroll-view :class="ns.b()" scroll-y @touchstart="onTouchStart" @touchend="onTouchEnd" @touchmove="onTouchmove"
    @scroll="onScroll">
    <uni-load-more :class="ns.e('refresh')" v-if="isRefresh" :contentText="contentLoading" :status="'noMore'"
      :style="{ height: refreshHeight }" />
    <slot></slot>
    <uni-load-more :class="ns.e('load-more')" v-if="finished || isLoadMore" :contentText="contentLoadMore"
      :status="isLoadMore ? 'more' : 'noMore'" />
  </scroll-view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { useNamespace } from "@/use";
import { ref } from "vue";
import { scrollRefreshLoadProps } from "./i-biz-scroll-refresh-load";

const ns = useNamespace(`scroll-refresh-load`);

const props = defineProps(scrollRefreshLoadProps);

const emit = defineEmits(["load", "refresh"]);

const refreshHeight = ref('0px');

const touchStartX = ref(0);
const touchStartY = ref(0);

const isRefresh = ref(false);
const isTop = ref(true);
const isLoadMore = ref(false);

const contentLoading = ref({
  contentnomore: "下拉即可刷新",
});
const contentLoadMore = ref({
  contentdown: "上拉显示更多",
  contentrefresh: "正在加载...",
  contentnomore: "我已经到底啦~",
});

if (props.contentText) {
  Object.assign(contentLoadMore, props.contentText);
}

const onScroll = (event: IData) => {

  const { scrollTop } = event.detail
  if (scrollTop > 50) {
    isTop.value = false
  } else {
    isTop.value = true
  }
}

/**
 * 触摸开始
 **/
const onTouchStart = (e: MouseEvent) => {
  touchStartX.value = e.touches[0].clientX;
  touchStartY.value = e.touches[0].clientY;
};

/**
 * 拖动过程中
 */
const onTouchmove = (e: MouseEvent) => {
  let deltaY = e.changedTouches[0].clientY - touchStartY.value;

  if (isTop && deltaY > 0) {
    isRefresh.value = true;
    refreshHeight.value = `${deltaY}px`
  }
  if (isTop && deltaY > 50) {
    contentLoading.value = {
      contentnomore: "释放即可刷新",
    };
  } else {
    contentLoading.value = {
      contentnomore: "下拉即可刷新",
    };
  }

  if (deltaY <= 0) {
    isLoadMore.value = true;
  }
};

/**
 * 触摸结束
 **/
const onTouchEnd = (e: MouseEvent) => {
  let deltaX = e.changedTouches[0].clientX - touchStartX.value;
  let deltaY = e.changedTouches[0].clientY - touchStartY.value;
  const isSlideY = Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY);
  if (isSlideY && deltaY < 0) {
    isLoadMore.value = false;
    emit("load");
  }
  if (isTop && isSlideY && deltaY > 50) {
    emit("refresh");
  }

  isRefresh.value = false;
  refreshHeight.value = '0px'
};
</script>
<style scoped lang="scss">
@include b("scroll-refresh-load") {
  width: 100%;
  height: 100%;

  @include e("refresh") {
    background: var(--ibiz-color-bg-0);
  }

  @include e("load-more") {
    height: 50px;
    line-height: 50px;
    background: var(--ibiz-color-bg-0);
  }
  ::v-deep {
    .ibiz-span {
      line-height: 1rem;
    }
  }
}
</style>